<template>
  <view class="m">
    <u-form :model="form" ref="uForm">
      <u-form-item label-width="80" label="*分值">
        <u-number-box v-model="form.point"></u-number-box>
      </u-form-item>
      <u-form-item label-width="190" label="*请选择题型">
        <u-input :selectOpen="show1" type="select" placeholder="请选择题型" @click="show1 = true" v-model="type"/>
      </u-form-item>
      <u-form-item label-width="80" label="*题目">
        <u-input type="textarea" placeholder="请输入题目" :border="true" :auto-height="true" v-model="form.title"/>
      </u-form-item>
      <view v-if="(form.typeValue === 2 || form.typeValue === 3)" >
        <view v-for="(option, index) in form.optionList" :key="index">
          <u-form-item label-width="60" :label="'*' + option.value" >
            <u-input name="input" height="55" type="textarea" placeholder="请输入选项" :auto-height="true" :border="true" v-model="option.content"/>
          </u-form-item>
        </view>
      </view>
      <view v-if="form.typeValue === 1">
        <u-form-item label-width="190" label="*请选择答案">
          <u-input  :selectOpen="show2" type="select" placeholder="请选择答案" @click="show2 = true" v-model="form.answer"/>
        </u-form-item>
      </view>
      <view v-else-if="form.typeValue === 2">
        <u-form-item label-width="190" label="*请选择答案">
          <u-radio-group  v-model="form.answer">
            <view class="two" v-for="(option1, index1) in form.optionList" :key="index1">
              <u-radio label-size="35rpx" icon-size="40rpx" :name="option1.value">
                {{ option1.value }}
              </u-radio>
            </view>
          </u-radio-group>
        </u-form-item>
      </view>
      <view v-else-if="form.typeValue === 3">
        <u-form-item label="*答案" class="lh">
          <u-checkbox-group icon-size="40rpx" label-size="35rpx" @change="checkboxGroupChange">
            <view v-for="(choice, index2) in form.optionList" :key="index2">
              <u-checkbox
                  v-model="choice.check"
                  :name="choice.value"
              >{{ choice.value }}</u-checkbox>
            </view>
          </u-checkbox-group>
        </u-form-item>
      </view>
      <u-form-item label="*答案" v-else-if="(form.typeValue === 4 || form.typeValue === 5)">
        <u-input type="textarea" :auto-height="true" :border="true"  placeholder="请输入答案" height="55" v-model="form.answer"/>
      </u-form-item>
      <u-form-item label="*解析">
        <u-input  type="textarea" placeholder="请输入解析" :border="true" :auto-height="true" v-model="form.parse"/>
      </u-form-item>
    </u-form>
    <view style="text-align: center;margin-top: 20rpx;">
      <u-button size="medium" shape="circle" type="primary" @click="submit" :ripple="true" ripple-bg-color="#a0cfff">提交</u-button>
    </view>
    <u-select @confirm="typeChange" @cancel="show1 = false" v-model="show1" :list="typeSelect"></u-select>
    <u-select @confirm="judgeChange" @cancel="show2 = false" v-model="show2" label-name="content" :list="form.optionList"></u-select>
  </view>
</template>

<script>

export default {
  name: 'exercise',
  data() {
    return {
      typeSelect: [{
        value: 1,
        label: '判断题'
      }, {
        value: 2,
        label: '单选题'
      }, {
        value: 3,
        label: '多选题'
      }, {
        value: 4,
        label: '填空题'
      }, {
        value: 5,
        label: '问答题'
      }],
      judgeSelect: [{
        value: 'A',
        content: '对'
      }, {
        value: 'B',
        content: '错'
      }],
      choiceSelect: [{
        value: 'A',
        check: false
      }, {
        value: 'B',
        check: false
      }, {
        value: 'C',
        check: false
      }, {
        value: 'D',
        check: false
      }],
      optionList: [{
        value: 'A',
        content: ''
      }, {
        value: 'B',
        content: ''
      }, {
        value: 'C',
        content: ''
      }, {
        value: 'D',
        content: ''
      }],
      type: '判断题',
      show1: false,
      show2: false,
      form: {
        title: "",
        typeValue: 1,
        answer: "",
        parse: "",
        point: 1,
        optionList: [{
          value: 'A',
          content: '对'
        }, {
          value: 'B',
          content: '错'
        }]
      }
    };
  },
  props: {
    subject: {
      type: Object,
      required: false,
      default: null,
    },
    isUpdate: {
      type: Boolean,
      default: false
    },
    exerciseTitleId: {
      type: String,
      default: ''
    }
  },
  created() {
    if (this.isUpdate) {
      let typeStr = ['判断题', '单选题', '多选题', '填空题', '问答题']
      this.form = this.subject;
      if (this.form.optionList.length < 4) {
        if (this.form.typeValue === 2) {
          this.form.optionList.push({
            value: 'D',
            content: ''
          })
        } else if (this.form.typeValue === 3) {
          this.form.optionList.push({
            value: 'D',
            check: false
          })
        }
      }
      this.type = typeStr[this.form.typeValue - 1]
    }
  },
  methods: {
    /**
     * 题型选择
     * @param e
     */
    typeChange(e) {
      if (this.isUpdate) {
        this.$u.toast("修改不能选择题型，建议删除之后重新添加");
      } else {
        this.form.typeValue = e[0].value;
        this.type = e[0].label;
        if (this.form.typeValue === 1) {
          this.form.optionList = this.judgeSelect;
        } else if (this.form.typeValue === 2) {
          this.form.optionList = this.optionList;
        } else if (this.form.typeValue === 3) {
          this.form.optionList = this.choiceSelect;
        }
      }
    },
    /**
     * 判断题答案选择
     * @param e
     */
    judgeChange(e) {
      this.form.answer = e[0].value;
    },
    /**
     * 选择题答案选择
     * @param e
     */
    choiceChange(e) {
      this.form.answer = e[0].value;
    },
    /**
     * 多选题答案选择
     * @param e
     */
    checkboxGroupChange(e) {
      this.form.answer = "";
      for (let i = 0; i < e.length; i++) {
        this.form.answer = this.form.answer + e[i];
      }
    },
    checkForm() {
      if (this.type === '') {
        this.$u.toast('请选择题型');
        return false;
      }

      if (this.form.title === '') {
        this.$u.toast('题目不能为空');
        return false;
      }

      if (this.form.answer === '') {
        this.$u.toast('请输入答案');
        return false;
      }

      if (this.form.parse === '') {
        this.$u.toast('请输入解析');
        return false;
      }

      if (this.form.typeValue === 2) {
        for (let i = 0; i < 3; i++) {
          if (this.form.optionList[i].content === '') {
            this.$u.toast('单选题至少有三个选项，选项' + this.form.optionList[i].value + '不能为空');
            return false;
          }
        }
        if (this.form.optionList[3].content === '') {
          this.form.optionList.splice(3, 1);
        }
      }
      if (this.form.typeValue === 3) {
        for (let i = 0; i < 3; i++) {
          if (this.form.optionList[i].content === undefined || this.form.optionList[i].content === '') {
            this.$u.toast('多选题至少有三个选项选项，选项' + this.form.optionList[i].value + '不能为空');
            return false;
          }
        }
        if (this.form.optionList[3].content === undefined || this.form.optionList[3].content === '') {
          this.form.optionList.splice(3, 1);
        }
      }
      return true;
    },
    submit() {
      if (!this.checkForm()) {
        return;
      }
      // 深拷贝，防止修改到原数据导致多选框是未选中状态
      let list = this.$u.deepClone(this.setOption(this.form.typeValue));
      if (this.form.typeValue === 3) {
        for (let item of list) {
          item.check = false;
        }
      }
      let data = {
        exerciseTitleId: this.exerciseTitleId,
        title: this.form.title,
        typeValue: this.form.typeValue,
        answer: this.form.answer,
        parse: this.form.parse,
        point: this.form.point,
        optionList: JSON.stringify(list)
      }
      if (this.isUpdate) {
        data.id = this.subject.id;
        this.$u.api.updateExercise(data).then(res => {
          if (res.code === 200) {
            this.$u.toast("修改成功！");
          }
        })
      } else {
        this.$u.api.saveExercise(data).then(res => {
          if (res.code === 200) {
            this.$u.toast("提交成功！");
            this.type = '判断题';
            this.form = {
              title: "",
              typeValue: 1,
              answer: "",
              parse: "",
              point: 1,
              optionList: [{
                value: 'A',
                content: '对'
              }, {
                value: 'B',
                content: '错'
              }]
            };
          }
        })
      }
    },
    setOption(type) {
      if (type === 1) {
        return this.judgeSelect;
      } else if (type === 2 || type === 3) {
        return this.form.optionList;
      } else {
        return [];
      }
    }
  }
}

</script>

<style scoped>
.lh{
  line-height: 10rpx;
}
.m {
  margin-left: 20rpx;
  margin-top: 15rpx;
}
</style>
